<template>
  <div class="widget_form_container">
    <el-form class="widget_form_list" label-position="top" ref="widget_form_container">
      <draggable
        v-model="data.list"
        tag="ul"
        :no-transition-on-drag="true"
        dragClass="dragClass"
        v-bind="{group:'cmTemplateContainer', ghostClass: 'ghost',animation: 200, handle: '.dragAble'}">
        <transition-group name="fade" tag="div" class="widget-col-list">
          <li class='line-width-3' v-for="(el, i) in data.list" :key="el.key">
            <div class="dragAble">
              <widget-selected-item
                v-if="el.placeholder.startsWith('selected_')"
                :element="el"
                :selectedElement="data.selectedConfigList[getSelectedIndex(el.placeholder)]"
                :select.sync="selectWidget"
                @updateData="updateData"
                :data="data"
                :index="i"></widget-selected-item>
              <widget-form-item
                v-else
                :element="el"
                :select.sync="selectWidget"
                :index="i"
                @updateData="updateData"
                :data="data">
              </widget-form-item>
            </div>
            <div class="form-resize-bar" @mousedown.stop="onmousedown($event, i)" @mouseup="onmouseup">
              <div class="line" style="pointer-events: none;"></div>
            </div>
          </li>
        </transition-group>
      </draggable>
      <draggable v-model="data.tables"
                 tag="ul"
                 :no-transition-on-drag="true"
                 dragClass="dragClass"
                 v-bind="{group:'cmTemplateTable', ghostClass: 'ghost',animation: 200,}">
        <transition-group name="fade" tag="ul" class="widget-col-list">
          <li class="line-width-1 tableBox" v-for="(tableItem, index) in data.tables" :key="index">
            <el-table border="">
              <el-table-column prop="" :label="field" align="center" v-for="(field, fieldIndex) in tableItem.fields" :key="fieldIndex">
              </el-table-column>
            </el-table>
          </li>
        </transition-group>
      </draggable>
    </el-form>
  </div>
</template>

<script>
  import Draggable from 'vuedraggable'
  import WidgetFormItem from './WidgetFormItem'
  import WidgetSelectedItem from './WidgetSelectedItem'
  import WidgetTableItem from './WidgetTableItem'
  import util from '@/utils/util.js'
  export default {
    name: 'widgetForm',
    components: {
      Draggable,
      WidgetFormItem,
      WidgetTableItem,
      WidgetSelectedItem
    },
    props: {
      data: {
        type: Object,
        default: () => ({
          list: [],
          selectedConfigList: [],
          tables: []
        })
      }
    },
    data () {
      return {
        selectWidget: {},
        dragBoxWidth: ''
      }
    },
    watch: {
      select (val) {
        this.selectWidget = val
      },
      selectWidget: {
        handler (val) {
          this.$emit('update:select', val)
        },
        deep: true
      }
    },
    mounted () {
      document.onmouseup = () => {
        document.onmousemove = null
      }
    },
    methods: {
      getSelectedIndex (placeholder) {
        let groupName = placeholder.split('_')[1]
        let index = this.data.selectedConfigList.findIndex(item => item.group === groupName)
        return index
      },
      updateData (val, index) {
        if (val[0]) {
          this.$set(this.data.list, index, {
            ...this.data.list[index],
            ...val[0]
          })
        } else {
          this.data.list[index].fieldType = ''
          this.data.list[index].fieldName = ''
        }
      },
      onmousedown ($event, index) {
        this.dragBoxWidth = this.$refs.widget_form_container.$el.offsetWidth
        let dragBoxRight = this.$refs.widget_form_container.$el.getBoundingClientRect().right
        let self = this
        let parentBox = $event.target.offsetParent
        let dx = $event.clientX // 当你第一次单击的时候，存储x轴的坐标。
        let dw = parentBox.offsetWidth // 存储默认的div的宽度。
        let disright = parentBox.offsetLeft + parentBox.offsetWidth // 存储div右边距离屏幕左边的距离。
        document.onmousemove = util._throttle(ev => {
          let iEvent = ev || event
          let width = dw + (iEvent.clientX - dx) // iEvent.clientX-dx表示第二次鼠标的X坐标减去第一次鼠标的X坐标，得到绿色移动的距离（为负数），再加上原本的div宽度，就得到新的宽度。
          if (iEvent.clientX > dragBoxRight - 10) return  // 判断是否拖到最右边
          parentBox.style.width = width + 'px'
          self.data.list[index].config.width = Number(width / self.dragBoxWidth * 100).toFixed(2) + '%'
        })
        return false
      },
      onmouseup () {
        document.onmousedown = null
        document.onmousemove = null
      },
    }
  }
</script>

<style lang="scss">
  .widget_form_container {
    .widget_form_list>ul>div {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      li {
        position: relative;
        .form-resize-bar {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          width: 12px;
          cursor: ew-resize;
          &:hover{
            .line {
              display: block;
            }
          }
          .line {
            position: absolute;
            top: 5px;
            right: 3px;
            width: 2px;
            height: calc(100% - 10px);
            background-color: #409EFF;
            display: none;
          }
        }
      }
    }
    .line-width-3 {
      width: calc(33.3% - 1px);
    }
    .line-width-1 {
      width: 100%;
    }

    .tableBox {
      padding: 5px;

    }

    .form-edit-widget-label {
      display: none;
    }

    .el-checkbox__input.is-disabled+span.el-checkbox__label {
      color: #606266
    }
  }
</style>
